<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AB对战</title>
    <style>
      h1 {
        width: 500px;
        text-align: center;
      }
      .tips {
        background-color: azure;
        padding: 12px;
        width: 480px;
        text-align: center;
      }

      .war-area {
        position: relative;
        width: 500px;
        height: 360px;
        background-color: antiquewhite;
        margin: 20px auto;
      }
      #war1,
      #war2 {
        position: absolute;
        width: 50px;
        height: 50px;
      }
      #war1 {
        top: 0px;
        left: 0px;
        background-color: rgb(73, 43, 226);
      }
      #war2 {
        top: 310px;
        left: 450px;
        background-color: rgb(226, 43, 70);
      }
      #lanxuetiao {
        top: 0px;
        left: 0px;
        background-color: rgb(139, 147, 96);
      }
      #hongxuetiao {
        top: 310px;
        left: 450px;
        background-color: rgb(139, 147, 96);
      }
      #xue {
        width: 10px;
        height: 10px;
        position: absolute;
        background-color: rgb(11, 11, 10);
      }
    </style>
  </head>
  <body>
    <h1>AB对战</h1>
    <div class="tips">
      两套方向键控制AB对战，攻击武器（剪刀石头布），输的血条掉。
    </div>
    <div class="war-area">
      <div id="war1">
        <div id="lanxuetiao" style="width: 45px; height: 5px"></div>
        <div id="a1" style="display: block">石头</div>
        <div id="a2" style="display: none">剪刀</div>
        <div id="a3" style="display: none">布</div>
      </div>
      <div id="war2">
        <div id="hongxuetiao" style="width: 50px; height: 5px"></div>
        <div id="b1" style="display: block">石头</div>
        <div id="b2" style="display: none">剪刀</div>
        <div id="b3" style="display: none">布</div>
      </div>
      <div id="xue" style="left: 0px; top: 0px; display: none"></div>
    </div>
    <script>
      var a; //1为蓝，2为红
      var xueStyle = document.getElementById("xue").style;
      function checkXue(color) {
        xueStyle.display = "none";
        var xuetiao = document.getElementById(color + "xuetiao").style.width;
        if (parseInt(xuetiao) == 50) {
        } else if (parseInt(xuetiao) == 45) {
          document.getElementById(color + "xuetiao").style.width =
            parseInt(xuetiao) + 5 + "px";
        } else if (parseInt(xuetiao) < 45 && parseInt(xuetiao) > 0) {
          document.getElementById(color + "xuetiao").style.width =
            parseInt(xuetiao) + 10 + "px";
        } else if (parseInt(xuetiao) <= 0) {
          alert("游戏结束，" + color + "方输了");
        }
      }

      var intervalIdForCountdown = setInterval(function () {
        chuxianxue();
      }, 5000);
      function chuxianxue() {
        xueStyle.display = "block";
        xueStyle.top = Math.random() * 300 + "px";
        xueStyle.left = Math.random() * 440 + "px";
      }
      function checkZhuang() {
        var xueWar = xue.getBoundingClientRect();
        var blueWar = war1.getBoundingClientRect();
        var redWar = war2.getBoundingClientRect();
        console.log(9999999, blueWar, redWar, xueWar);
        if (
          blueWar.right < redWar.left ||
          blueWar.left > redWar.right ||
          blueWar.bottom < redWar.top ||
          blueWar.top > redWar.bottom
        ) {
        } else {
          checkDisplay();
        }
        if (
          blueWar.right < xueWar.left ||
          blueWar.left > xueWar.right ||
          blueWar.bottom < xueWar.top ||
          blueWar.top > xueWar.bottom
        ) {
        } else {
          checkXue("lan");
        }
        if (
          redWar.right < xueWar.left ||
          redWar.left > xueWar.right ||
          redWar.bottom < xueWar.top ||
          redWar.top > xueWar.bottom
        ) {
        } else {
          checkXue("hong");
        }
      }
      function checkDisplay() {
        var atext;
        var btext;
        for (var a = 1; a < 4; a++) {
          if (document.getElementById("a" + a).style.display === "block") {
            atext = document.getElementById("a" + a).textContent;
            break;
          }
        }
        for (var b = 1; b < 4; b++) {
          if (document.getElementById("b" + b).style.display === "block") {
            btext = document.getElementById("b" + b).textContent;
            break;
          }
        }
        if (atext == "石头") {
          var lanchu = 1; //1石头2剪刀3布
        } else if (atext == "剪刀") {
          var lanchu = 2;
        } else if (atext == "布") {
          var lanchu = 3;
        }

        if (btext == "石头") {
          var hongchu = 1; //1石头2剪刀3布
        } else if (btext == "剪刀") {
          var hongchu = 2;
        } else if (btext == "布") {
          var hongchu = 3;
        }
        var lanxuetiao = document.getElementById("lanxuetiao").style.width;
        var hongxuetiao = document.getElementById("hongxuetiao").style.width;
        if (lanchu === hongchu) {
          alert("平局，各掉5滴血");
          var cleft1 = 0;
          var cleft2 = 450;
          var ctop1 = 0;
          var ctop2 = 310;
          document.getElementById("lanxuetiao").style.width =
            parseInt(lanxuetiao) - 5 + "px";
          document.getElementById("hongxuetiao").style.width =
            parseInt(hongxuetiao) - 5 + "px";
        } else if (hongchu - lanchu === 1 || hongchu - lanchu === -2) {
          alert("蓝赢，红掉10滴血");
          var cleft1 = 0;
          var cleft2 = 450;
          var ctop1 = 0;
          var ctop2 = 310;
          document.getElementById("hongxuetiao").style.width =
            parseInt(hongxuetiao) - 10 + "px";
        } else if (hongchu - lanchu === -1 || hongchu - lanchu === 2) {
          alert("红赢，蓝掉10滴血");
          var cleft1 = 0;
          var cleft2 = 450;
          var ctop1 = 0;
          var ctop2 = 310;
          document.getElementById("lanxuetiao").style.width =
            parseInt(lanxuetiao) - 10 + "px";
        }
      }

      function qiehuan(ab) {
        var chuzhao;
        for (var i = 1; i <= 3; i++) {
          if (document.getElementById(ab + i).style.display === "block") {
            chuzhao = i;
            chuzhao;
            break;
          }
        }
        var next = (chuzhao % 3) + 1;
        for (var j = 1; j <= 3; j++) {
          document.getElementById(ab + j).style.display =
            j === next ? "block" : "none";
        }
      }
      var controllerDom1 = document.getElementById("war1");
      var cleft1 = parseInt(getComputedStyle(controllerDom1).left);
      var ctop1 = parseInt(getComputedStyle(controllerDom1).top);
      var controllerDom2 = document.getElementById("war2");
      var cleft2 = parseInt(getComputedStyle(controllerDom2).left);
      var ctop2 = parseInt(getComputedStyle(controllerDom2).top);
      document.addEventListener("keydown", (e) => {
        if (e.key === "ArrowLeft") {
          cleft1 = cleft1 - 10;
        } else if (e.key === "ArrowRight") {
          cleft1 = cleft1 + 10;
        } else if (e.key === "ArrowUp") {
          ctop1 = ctop1 - 10;
        } else if (e.key === "ArrowDown") {
          ctop1 = ctop1 + 10;
        } else if (e.keyCode == "32") {
          //空格监听
          qiehuan("a");
        }
        if (cleft1 < 0) {
          cleft1 = 0;
        } else if (cleft1 > 450) {
          cleft1 = 450;
        }
        if (ctop1 < 0) {
          ctop1 = 0;
        } else if (ctop1 > 310) {
          ctop1 = 310;
        }
        controllerDom1.style.left = cleft1 + "px";
        controllerDom1.style.top = ctop1 + "px";
        if (e.key === "a") {
          cleft2 = cleft2 - 10;
        } else if (e.key === "d") {
          cleft2 = cleft2 + 10;
        } else if (e.key === "w") {
          ctop2 = ctop2 - 10;
        } else if (e.key === "s") {
          ctop2 = ctop2 + 10;
        } else if (e.keyCode == "13") {
          //enter监听
          qiehuan("b");
        }

        if (cleft2 < 0) {
          cleft2 = 0;
        } else if (cleft2 > 450) {
          cleft2 = 450;
        }
        if (ctop2 < 0) {
          ctop2 = 0;
        } else if (ctop2 > 310) {
          ctop2 = 310;
        }
        controllerDom2.style.left = cleft2 + "px";
        controllerDom2.style.top = ctop2 + "px";
        checkZhuang();
      });
    </script>
  </body>
</html>
